<template>
  <scroll-view v-show="visible" scroll-y class="face-scroll">
    <view class="face-wrap">
      <view
        class="face-item"
        v-for="(item, index) in faceList"
        :key="index"
        @click="strToEmoji(item.title)"
      >
        <image
          class="face-item-img"
          :src="item.src"
          :title="item.title"
        />
      </view>
    </view>
  </scroll-view>
</template>

<script>

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    faceList: {
      type: Array,
      default: function() { return [] }
    }
  },
  methods: {
    strToEmoji(title) {
      this.$emit('emoji', title)
    }
  }
}
</script>

<style lang="scss" scoped>
.face-scroll {
  height: 300rpx;
  padding-top: 20rpx;
  .face-wrap {
    display: flex;
    flex-wrap: wrap;
    padding-left: 10rpx;
    .face-item {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      overflow: hidden;
      margin: -2rpx 0 0 -2rpx;
      padding: 8rpx 4rpx;
      text-align: center;
      height: 84rpx;
      width: 84rpx;
      &-img {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }
}
</style>